 <!DOCTYPE html>
 <html lang="en">
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>Document</title>
 </head>
 <body>
     
 </body>
 </html>
 <!-- - #笔记要求

##笔记
- 每日边看视频边记录笔记，然后每个知识点需要自己解释一下
- 以及 每日未解决的问题可以记录下来
- 记录每日完成多少代码量（多少行）
- 今天做了什么
有做项目的话，项目的进度 -->
DOM操作

什么是DOM
文档对象模型（Document Object Model，DOM）是一种用于HTML和XML文档的编程接口。
它给文档提供了一种结构化的表示方法，可以改变文档的内容和呈现方式。
我们最为关心的是，DOM把网页和脚本以及其他的编程语言联系了起来。

要理解DOM先要先理解树的概念 
document
document对象用来表示整份文档
即当前网页，和window对象做区别，window对象表示的是窗口，
所以document是window的一个子对象或者说是一个属性。


关系：作为树形结构，拥有树形结构的节点关系,可以通过children与parentNode来访问孩子与父亲节点

className属性：
唯一不同的是样式的class特性，
因为class是ECMAScript的保留字，所以使用className代替

dom.className获取class的值

dom.className=''设置class的值

innerHTML：
dom.innerHTML:获取html内容

dom.innerHTML=''设置dom元素的内容

style:所有style的属性都隶属于dom对象的style对象

注意：style属性无法获取
属性的名称是首字母小写的驼峰式，即把-去掉，之后大写

getAttribute与setAttribute
:
html也提供了专门的函数来处理属性
优点：可以设置自定义属性

dom的增删改查：
创建节点：

document.createElement() 创建元素
document.createTextNode() 创建文本节点

删除节点
：removeChild(); 删除节点

插入位置：

appendChild(); 往最后位置插入元素（插入的区别）

insertBefore();插入到某位置前面（插入的区别）

replaceChild()；替换节点


文档碎片的方法：
创建一个虚拟位置，所有数据都往虚拟位置插入元素，最后再插入目标位置


事件处理器属性：onclick